<template>
    <div class="orderPage" data-ydui-tab>
        <view class="subsectionBox">
            <u-subsection
                :list="menuTabs"
                :current="orderStatus"
                activeColor="#9F07B7"
                inactiveColor="#FFFFFF"
                @change="sectionChange"
            />
        </view>
        <view class="orderListBox">
            <orderCard
                v-for="(item,index) in menuLists"
                :key="index"
                :item="item"
            />
        </view>
    </div>
</template>

<script>
    import { orderCard } from "./components/orderCard.vue"
    export default {
        components: {
            orderCard
        },
        data() {
            return {
                orderStatus: 0,
                menuTabs: ['全部', '待支付', '已支付', '待收货', '已完成'],
                menuLists: [{
                    id: 1,
                    code: 1234567,
                    status: 1,
                    time: '2023-01-01 12:00:00',
                    totalPay: 1999,
                    proList: [{
                        id: 11111,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 1
                    }, {
                        id: 11112,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 2
                    }, {
                        id: 11113,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 3
                    }]
                }, {
                    id: 2,
                    code: 1234567,
                    status: 2,
                    time: '2023-01-01 12:00:00',
                    totalPay: 1999,
                    proList: [{
                        id: 11111,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 1
                    }, {
                        id: 11112,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 2
                    }, {
                        id: 11113,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 3
                    }]
                }, {
                    id: 3,
                    code: 1234567,
                    status: 3,
                    time: '2023-01-01 12:00:00',
                    totalPay: 1999,
                    proList: [{
                        id: 11111,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 1
                    }, {
                        id: 11112,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 2
                    }, {
                        id: 11113,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 3
                    }]
                }, {
                    id: 3,
                    code: 1234567,
                    status: 4,
                    time: '2023-01-01 12:00:00',
                    totalPay: 1999,
                    proList: [{
                        id: 11111,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 1
                    }, {
                        id: 11112,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 2
                    }, {
                        id: 11113,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 3
                    }]
                }]
            }
        },
        onLoad() {

        },
        methods: {
            sectionChange(index) {
                this.orderStatus = index;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .orderPage {
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: $uni-bg-color-grey;
        .subsectionBox {
            padding: 20rpx;
            background-color: #FFFFFF;
            ::v-deep .u-subsection {
                height: 80rpx;
                background-color: $uni-color-primary !important;
                border-radius: 80rpx;
                .u-subsection__bar {
                    border-radius: 80rpx !important;
                }
                .u-subsection__item {
                    border-radius: 80rpx;
                }
            }
        }
        
        .orderListBox {
            flex: 1;
			overflow-y: auto;
        }
    }
</style>